<html>

<head>
	<style>
		body {
			background: black;
		}

		.btn {
			width: 100%;
			height: 100%;
			border: none;
			text-align: center;
			background-size: 60% 60%;
			background-color: transparent;
			outline: none;
			background-repeat: no-repeat;
			background-position: center center;
		}

		.btn:hover {
			background-color: rgba(0, 0, 0, 0.3);
		}

		td {
			text-align: center;
		}

		* {
			-webkit-user-select: none;
			-webkit-user-drag: none;
		}

		#BAR {
			background: rgba(255, 255, 255, 0.7);
			position: absolute;
			z-index: 3;
			left: 50%;
			bottom: 0;
			text-align: center;
			height: 8vh;
			width: 50vh;
			min-height: 60px;
			min-width: 380px;
			border-radius: 10px;
			backdrop-filter: blur(2px);
			transform: translateX(-50%);
			transition: all 0.3s linear;
		}
	</style>
	<title>图片查看</title>
</head>

<body style="overflow: hidden;">
	<img id='IMG' style="position: absolute; z-index: 1" src="">
	<div id='DRAG' style="position: absolute; z-index: 2; width: 100%; height: 100%; left: 0px; top: 0px;"></div>
	<div id='BAR'>
		<table style="width: 48vh; min-width: 360px; height: 100%; margin: auto;">
			<tr>
				<!-- Template <td><button class='btn' style='background-image: url(data:image/svg+xml;base64,"></button></td> -->
				<!-- toggle -->
				<td>
					<button class='btn'
						style='background-image: url();'></button>
				</td>
				<!-- Rotate Left -->
				<td>
					<button class='btn'
						style='background-image: url();'></button>
				</td>
				<!-- Rotate Right -->
				<td>
					<button class='btn'
						style='background-image: url();'></button>
				</td>
				<!-- Zoom In -->
				<td>
					<button class='btn'
						style='background-image: url();'></button>
				</td>
				<!-- Zoom Out -->
				<td>
					<button class='btn'
						style='background-image: url();'></button>
				</td>
				<!-- Download -->
				<td>
					<button class='btn'
						style='background-image: url();'></button>
				</td>
			</tr>
		</table>
	</div>
	<a style="display: none" id='download' download href=""></a>
</body>
<script>
	const body = document.body
	const IMG = document.getElementById('IMG')
	const DRAG = document.getElementById('DRAG')
	const BAR = document.getElementById('BAR')
	const DOWNLOAD = document.getElementById('download')
	const url = decodeURIComponent(new RegExp('\\?url=(.*)').exec(window.parent.location.href)[1]).trim()
	IMG.src = url
	DOWNLOAD.href = url
	IMG.style.transformOrigin = 'top left'

	var centerX = -1	// to center, with % instead
	var centerY = -1
	var rotate = 0	// degree
	var zoom = 1
	var scale = 1 // store the zoom before scaling

	var toggle = false

	function deployLT() {
		if (centerX < 0 || centerY < 0) {
			centerX = 50
			centerY = 50
		}
		var cX = centerX * body.clientWidth / 100
		var hX = IMG.offsetWidth / 2
		var cY = centerY * body.clientHeight / 100
		var hY = IMG.offsetHeight / 2
		IMG.style.left = cX - hX
		IMG.style.right = cX + hX
		IMG.style.top = cY - hY
		IMG.style.bottom = cY + hY
	}

	function adapt(relative = null) {
		var absX, absY

		centerX = 50
		centerY = 50

		if (relative) {
			// force adjust
			if (body.clientWidth - IMG.offsetWidth > body.clientHeight - IMG.offsetHeight) {
				// use height
				var ratio = IMG.offsetWidth / IMG.offsetHeight
				IMG.style.height = body.clientHeight
				IMG.style.width = IMG.offsetHeight * ratio
			}
			else {
				var ratio = IMG.offsetHeight / IMG.offsetWidth
				IMG.style.width = body.clientWidth
				IMG.style.height = IMG.offsetWidth * ratio
			}
		}
		else if (relative == false) {
			// force adjust
			IMG.style.width = IMG.naturalWidth
			IMG.style.height = IMG.naturalHeight
		}
		const w = IMG.offsetWidth, h = IMG.offsetHheight
		deployLT()
	}

	// Drag support
	var starT, starTLT
	DRAG.onmousedown = function (ev) {
		var e = ev || window.event
		starT = [e.clientX, e.clientY]
		starTLT = [IMG.offsetLeft, IMG.offsetTop]
		window.addEventListener('mousemove', mousemove)
		window.addEventListener('mouseup', mouseup)
	}
	function mousemove(ev) {
		var e = ev || window.event

		if (starT == null) return

		if (centerX < 0 || centerY < 0) {
			centerX = 50
			centerY = 50
		}

		IMG.style.left = e.clientX - starT[0] + starTLT[0]
		IMG.style.top = e.clientY - starT[1] + starTLT[1]

		centerX = (IMG.offsetRight - IMG.offsetLeft) * 50 / body.clientWidth
		centerY = (IMG.offsetBottom - IMG.offsetTop) * 50 / body.clientHeight
	}


	function mouseup(ev) {
		starT = null
		window.removeEventListener('mousemove', mousemove)
		window.removeEventListener('mouseup', mouseup)
	}

	// deploy buttons

	function mkTransform(rotate, zoom) {
		return 'rotate(' + rotate + 'deg) scale(' + zoom + ',' + zoom + ')'
	}

	var btnactions = [
		function () {
			// toggle
			toggle = !toggle
			zoom = 1
			IMG.style.transform = mkTransform(rotate, zoom)
			adapt(toggle)
		}, function () {
			rotate -= 90
			if (!rotate % 360) rotate = 0
			IMG.style.transform = mkTransform(rotate, zoom)
		}, function () {
			rotate += 90
			if (!rotate % 360) rotate = 0
			IMG.style.transform = mkTransform(rotate, zoom)
		}, function (e) {
			// zoom in
			scale = zoom
			zoom += 0.2
			IMG.style.transform = mkTransform(rotate, zoom)
			updatePosition(e)
		}, function (e) {
			if (zoom < 0.3) return
			scale = zoom
			zoom -= 0.2
			IMG.style.transform = mkTransform(rotate, zoom)
			updatePosition(e)
		}, function () {
			// Download!
			DOWNLOAD.dispatchEvent(new MouseEvent('click'))
		}
	]

	var btns = document.getElementsByTagName('button')
	for (var i in btns) {
		btns[i].onclick = btnactions[i]
	}

	IMG.onload = btnactions[0]

	// ajust focus 
	function updatePosition(e) {
		var focus
		if (e.type === "click") {
			focus = { x: body.clientWidth / 2, y: body.clientHeight / 2 }
		}
		else {
			focus = { x: e.clientX, y: e.clientY }
		}

		var dx = (focus.x - IMG.offsetLeft) * (1 - zoom / scale);
		var dy = (focus.y - IMG.offsetTop) * (1 - zoom / scale);

		IMG.style.left = IMG.offsetLeft + dx + 'px'
		IMG.style.top = IMG.offsetTop + dy + 'px'

	}

	DRAG.onwheel = e => {
		if (e.wheelDeltaY > 0) {
			btnactions[3](e)
		}
		else if (e.wheelDeltaY < 0) {
			btnactions[4](e)
		}
	}

	document.addEventListener('keydown', (e) => {
		if (e.repeat) return
		if (e.key === 'w' && e.ctrlKey === true || e.key === 'Escape') {
			window.close()
		}
	})
	// Hide bar when window is onblur, and show when onfocus
	window.onblur = function () {
		BAR.style.opacity = 0
		BAR.style.visibility = 'hidden'
	}
	window.onfocus = function () {
		BAR.style.opacity = 1
		BAR.style.visibility = 'visible'
	}
</script>

</html>